<template>
  <section class="container">
      <!--render chapter-->
      <div v-for="(moduleID, index) in moduleMap.pages">
             <component v-bind:is=getStringName(moduleID) :chartData="getChartData(moduleID)"></component>
      </div>
  </section>
</template>

<script>
import {IdMapping} from '~/store/idMapping'
import axios from 'axios'
 let     HOME_PAGE= () => import('~/components/home_page.vue').then(m => m.default), //封面首页
      CHAPTER_ONE= () => import('~/components/chapter_one.vue').then(m => m.default), //第一章封面
      COOPERATION_TIMELINE= () => import('~/components/cooperation_timeline.vue').then(m => m.default), //合作时间轴
      STANDING_BOOK_DISTRIBUTE= () => import('~/components/standing_book_distribute.vue').then(m => m.default), //台账分布情况
      STANDING_BOOK= () => import('~/components/standing_book.vue').then(m => m.default), //台账时间分布情况
  RULE_PROCESS= () => import('~/components/rule_process.vue').then(m => m.default), //盘点规则及流程
  CLASSIFY_BOOK= () => import('~/components/classify_book.vue').then(m => m.default), //分类对账情况
  CHECK_ACCOUNT= () => import('~/components/checkAccount.vue').then(m => m.default), //对账情况
  CHECKACCOUNT_ADMINOFFICE= () => import('~/components/checkAccount_adminOffice.vue').then(m => m.default), //各科室对账情况
  CHECKACCOUNT_AGELIMIT= () => import('~/components/checkAccount_ageLimit.vue').then(m => m.default), //使用年限对账情况
  STANDINGBOOK_FINKDISK= () => import('~/components/standingBook_finkDisk.vue').then(m => m.default), //台账-医信精盘

  //第二章：云账数据分析
  CHAPTER_TWO= () => import('~/components/chapter_two.vue').then(m => m.default), //第二章封面
  CLOUD_BOOK_DISTRIBUTE= () => import('~/components/cloud_book_distribute.vue').then(m => m.default), //云账情况
  KEY_EQUIPMENT_USE_ANALYSIS= () => import('~/components/key_equipment_use_analysis.vue').then(m => m.default), //重点设备使用情况分析
  KEY_EQUIPMENT_SERVICE_ANALYSIS= () => import('~/components/key_equipment_service_analysis.vue').then(m => m.default), //重点设备超期服役分析
  ADMINOFFICE_DEVICENUM= () => import('~/components/adminOffice_deviceNum.vue').then(m => m.default), //科室多维分析-设备
  ADMINOFFICE_BRAND= () => import('~/components/adminOffice_brand.vue').then(m => m.default), //科室多维分析-品牌
  ADMINOFFICE_CATEGORY= () => import('~/components/adminOffice_category.vue').then(m => m.default), //科室多维分析-品类
  CATEGORY_ANALYSIS= () => import('~/components/category_analysis.vue').then(m => m.default), //医疗设备品类分析
  ADMINOFFICE_OVERTIME_DEVICE= () => import('~/components/adminOffice_overtimeDevice.vue').then(m => m.default), //科室多维分析-超时设备
  KEYNOTEDEVICE_DISTRIBUTE= () => import('~/components/keynoteDevice_distribute.vue').then(m => m.default), //重点设备分析-分布情况
  LIFEDEVICE_DISTRIBUTE= () => import('~/components/lifeDevice_distribute.vue').then(m => m.default), //生命设备分析-分布情况
  DEVICE_VALUE= () => import('~/components/device_value.vue').then(m => m.default), //设备价值分析
  KEY_EQUIPMENT_BRAND_ANALYSIS= () => import('~/components/key_equipment_brand_analysis.vue').then(m => m.default), //设备价值分析
  USETIME_ANALYSE= () => import('~/components/useTime_analyse.vue').then(m => m.default), //使用时长分析
  ADMINOFFICE_USEAGE= () => import('~/components/adminOffice_useAge.vue').then(m => m.default), //科室多维分析-使用年限分析
  ADMINOFFICE_DEVICEVALUE= () => import('~/components/adminOffice_deviceValue.vue').then(m => m.default), //科室多维分析-价值分析
  KEYNOTEDEVICE_USEAGE= () => import('~/components/keynoteDevice_useAge.vue').then(m => m.default), //重点设备-使用年限分析
  LIFEDEVICE_BRAND_ANALYSIS= () => import('~/components/lifeDevice_brand_analysis.vue').then(m => m.default), //生命支持类设备分析-品牌分析
  WORKER_RESPONSE_TIME= () => import('~/components/worker_response_time.vue').then(m => m.default), //医工响应及维修时长



  //第三章: 盘盈与盘亏数据分析
  CHAPTER_THREE= () => import('~/components/chapter_three.vue').then(m => m.default), //第三章封面
  PROFIT_DEVICE_VALUE= () => import('~/components/profit_device_value.vue').then(m => m.default), //盘盈分析-设备价值
  PROFIT_MEDICINE_DEVICE= () => import('~/components/profit_medicine_device.vue').then(m => m.default), //盘盈分析-医疗设备
  LOSSES_DEVICE_VALUE= () => import('~/components/losses_device_value.vue').then(m => m.default), //盘盈分析-设备价值
  LOSSES_MEDICINE_DEVICE= () => import('~/components/losses_medicine_device.vue').then(m => m.default), //盘亏分析-医疗设备
  DEPARTMENT_PROFIT_ANALYSIS= () => import('~/components/department_profit_analysis.vue').then(m => m.default), //盘盈分析-科室盘盈分析
  LOSSES_USEAGE= () => import('~/components/losses_useAge.vue').then(m => m.default), //盘亏分析-盘亏设备使用年限分析
  PROFIT_BRAND_DEVICE= () => import('~/components/profit_brand_device.vue').then(m => m.default), //盘亏分析-盘盈品牌分析
  LOSSES_BRAND_DEVICE= () => import('~/components/losses_brand_device.vue').then(m => m.default), //盘亏分析-盘亏品牌分析

  //第四章: 管理问题与建议
  CHAPTER_FOUR= () => import('~/components/chapter_four.vue').then(m => m.default), //第四章封面
  MANAGE_ADVISE= () => import('~/components/manage_advise.vue').then(m => m.default), //管理问题与建议

  //第五章: 附录
  CHAPTER_FIVE= () => import('~/components/chapter_five.vue').then(m => m.default), //第五章封面
  DEFINITION_CONCEPT= () => import('~/components/definition_concept.vue').then(m => m.default), //定义&概念
  CATEGORY_APPRAISEMENT= () => import('~/components/category_appraisement.vue').then(m => m.default), //各品类设备估值


  //第六章 维修
   CHAPTER_SIX= () => import('~/components/chapter_six.vue').then(m => m.default),//第六章封面
   REPAIR_BASE_CASE= () => import('~/components/repair_base_case.vue').then(m => m.default),//维修基本情况
   TIME_ANALYSIS= () => import('~/components/time_analysis.vue').then(m => m.default),//时间分析
   DEPARTMENT_ANALYSIS= () => import('~/components/department_analysis.vue').then(m => m.default),//科室分析
   VALUE_REPAIR_ANALYSIS= () => import('~/components/value_repair_analysis.vue').then(m => m.default),//价值维修分析
   USE_YEAR_ANALYSIS= () => import('~/components/use_year_analysis.vue').then(m => m.default),//使用年限分析
   VARIETIES_REPAIR_ANALYSIS= () => import('~/components/varieties_repair_analysis.vue').then(m => m.default),//品类维修分析
   KEY_EQUIPMENT_REPAIR_ANALYSIS= () => import('~/components/key_equipment_repair_analysis.vue').then(m => m.default),//重点设备维修分析
   EQUIPMENT_REPAIR_BRAND_ANALYSIS= () => import('~/components/equipment_repair_brand_analysis.vue').then(m => m.default),//重点设备维修品牌分析
   EQUIPMENT_REPAIR_TICKS_ANALYSIS= () => import('~/components/equipment_repair_ticks_analysis.vue').then(m => m.default),//重点设备维修工单分析
   EQUIPMENT_ERROR_ANALYSIS= () => import('~/components/equipment_error_analysis.vue').then(m => m.default),//重点设备故障原因分析
   LIFE_EQUIP_REPAIR_TIME_ANALYSIS= () => import('~/components/life_equip_repair_time_analysis.vue').then(m => m.default),//生命支持类设备维修时间分析
   LIFE_EQUIP_REPAIR_BRAND_ANALYSIS= () => import('~/components/life_equip_repair_brand_analysis.vue').then(m => m.default),//生命支持类设备维修品牌分析
   LIFE_EQUIP_REPAIR_CATEGORY_ANALYSIS= () => import('~/components/life_equip_repair_category_analysis.vue').then(m => m.default),//生命支持类设备维修品类分析
   LIFE_EQUIP_ERROR_ANALYSIS= () => import('~/components/life_equip_error_analysis.vue').then(m => m.default),//生命支持类设备故障原因分析
   WORKER_WORKLOAD_COUNT= () => import('~/components/worker_workload_count.vue').then(m => m.default),//医工工作量统计



  //目录
  PAGE_DIRECTORY= () => import('~/components/page_directory.vue').then(m => m.default) //目录




export default {
  asyncData ({ params, store,query }) {
    // get the mapping (hospital <----> module)
    let encodeID = encodeURI(params.id)
    let soloModuleID
    console.log(encodeID,"hhhh",query)
    if(typeof query.module !== 'undefined'){
      soloModuleID = query.module
    }
    axios.defaults.baseURL = 'http://121.42.252.26/autoreport/select';
//    axios.defaults.baseURL = 'http://121.42.187.170/autoreport/select';
    console.log('baseURL', axios.defaults.baseURL)
    return axios({
      url: 'template/select',
      baseURL: 'http://121.42.252.26', //http://127.0.0.1:4000/mock/template/select
      method: 'get',
      params: {
        tempId: query.template,
        hosId: encodeID
      }
    })
      .then((res) => {
//        console.log(res)
        let moduleMap = res.data.data;
        if(!moduleMap || !moduleMap.pages){
//          console.log('moduleMap',moduleMap)
          console.log("获取到的数据不正常");
          return {moduleMap: {pages:[]}}
        }
        // if no modules return blank array
        if (moduleMap.pages.length === 0) {
          return {moduleMap: {modules:[]}}
        }
        console.log('数据正常，准备获取每个模板的数据')
        let promiseArray
        let chaptersCollection = [2,12,30,39,41,44]  //不需要拉取数据的模块
        //test.......................
        if(soloModuleID){
          moduleMap.pages = [soloModuleID]
          console.log("单独模块测试模式",moduleMap.pages)
        }
        //test.......................

        promiseArray = moduleMap.pages.map((moduleID) => {
          //chapter did not send request
          var hasValue = chaptersCollection.some((value)=>{
                return value === moduleID
          })

          if(!hasValue){
          console.log('idmapping',IdMapping[moduleID], moduleID)
            return store.dispatch(IdMapping[moduleID], {hospitalID: encodeID, moduleID, style: query.style}) //encodeID, 118882,118930，120129,3622,3362
          }else{
            return false
          }
        })
        promiseArray  = Array.from(new Set(promiseArray));
        return Promise.all(promiseArray).then(function () {
          return {moduleMap}
        })
      })
  },
  validate ({ params, query }) {
    if(!isNaN(query.template) && params.id){
      return true
    }
    console.log("参数验证失败",params.id,query.template)
    console.log("query", query)

    return false

  },
  data(){
    return {
      page:0
    }
  },
  methods:{
    getChartData: function (moduleID) {
//      console.log("moduleID",moduleID)
//      console.log(IdMapping[moduleID],moduleID,"*************")
//      console.log("store状态", this.$store.state[IdMapping[moduleID]])
//      console.log("hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh")
      return this.$store.state[IdMapping[moduleID]] ? this.$store.state[IdMapping[moduleID]] : {}
    },
    getStringName: function(id){
      console.log(id)
      return ''+id
    }
  },
  components:{
    "1":HOME_PAGE,
    "1000":PAGE_DIRECTORY,
    "1001":PAGE_DIRECTORY,
    "2":CHAPTER_ONE,
    "3":COOPERATION_TIMELINE,
    "4":STANDING_BOOK_DISTRIBUTE,
    "5":STANDING_BOOK,
    "6":RULE_PROCESS,
    "7":CHECK_ACCOUNT,
    "8":CHECKACCOUNT_ADMINOFFICE,
    "9":CHECKACCOUNT_AGELIMIT,
    "10":CLASSIFY_BOOK,
    "11":STANDINGBOOK_FINKDISK,
    "12":CHAPTER_TWO,
    "13":CLOUD_BOOK_DISTRIBUTE,
    "14":ADMINOFFICE_DEVICENUM,
    "15":ADMINOFFICE_BRAND,
    "16":ADMINOFFICE_CATEGORY,
    "17":ADMINOFFICE_DEVICEVALUE,
    "18":ADMINOFFICE_USEAGE,
    "19":ADMINOFFICE_OVERTIME_DEVICE,
    "20":DEVICE_VALUE,
    "21":CATEGORY_ANALYSIS,
    "22":KEYNOTEDEVICE_DISTRIBUTE,
    "23":KEY_EQUIPMENT_BRAND_ANALYSIS,
    "24":KEY_EQUIPMENT_USE_ANALYSIS,
    "25":KEY_EQUIPMENT_SERVICE_ANALYSIS,
    "26":KEYNOTEDEVICE_USEAGE,
    "27":LIFEDEVICE_DISTRIBUTE,
    "28":LIFEDEVICE_BRAND_ANALYSIS,
    "29":USETIME_ANALYSE,
    "30":CHAPTER_THREE,
    "31":PROFIT_DEVICE_VALUE,
    "32":PROFIT_MEDICINE_DEVICE,
    "33":PROFIT_BRAND_DEVICE,
    "34":DEPARTMENT_PROFIT_ANALYSIS,
    "35":LOSSES_DEVICE_VALUE,
    "36":LOSSES_MEDICINE_DEVICE,
    "37":LOSSES_BRAND_DEVICE,
    "38":LOSSES_USEAGE,
    "39":CHAPTER_FOUR,
    "40":MANAGE_ADVISE,
    "41":CHAPTER_FIVE,
    "42":DEFINITION_CONCEPT,
    "43":CATEGORY_APPRAISEMENT,
    "44":CHAPTER_SIX,
    "45":REPAIR_BASE_CASE,
    "46":TIME_ANALYSIS,
    "47":DEPARTMENT_ANALYSIS,
    "48":VALUE_REPAIR_ANALYSIS,
    "49":USE_YEAR_ANALYSIS,
    "50":VARIETIES_REPAIR_ANALYSIS,
    "51":KEY_EQUIPMENT_REPAIR_ANALYSIS,
    "52":EQUIPMENT_REPAIR_BRAND_ANALYSIS,
    "53":EQUIPMENT_REPAIR_TICKS_ANALYSIS,
    "54":EQUIPMENT_ERROR_ANALYSIS,
    "55":LIFE_EQUIP_REPAIR_TIME_ANALYSIS,
    "56":LIFE_EQUIP_REPAIR_BRAND_ANALYSIS,
    "57":LIFE_EQUIP_REPAIR_CATEGORY_ANALYSIS,
    "58":LIFE_EQUIP_ERROR_ANALYSIS,
    "59":WORKER_WORKLOAD_COUNT,
    "60":WORKER_RESPONSE_TIME

  },
  mounted(){
    console.log(this.$route.params,"当前医院的id")
  }
}
</script>

<style lang="scss">
@import '../assets/css/common.scss';

.container{
    background: #fff;
    margin:0 auto;
    align-items: left;
    .page_name{
        justify-content: center;
        height:100px;
        text-align: center;
    }
     >div{
         width: 100%;
     }
}
.clear:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }

.left {
    float: left; }

.right {
    float: right; }

.sending-book-text{
    padding: 0 35px;
    margin: 60px auto 0 auto;
}
.paragraph-text{
    text-indent: 2em;
    color: #656666;
    line-height: 1.8em;
    font-size: 14px;
    >b{
        color:#0c122e;
    }
}

.charts_title{
    color: #666;
    font-weight: 400;
    font-size: 14px;
}
</style>
